<div class="layout-nav--tab">
    <ul class="tab--list">
        <li
            class="tab--item"
            [ngClass]="'tab--item-' + tabItem.code"
            [class.active]="tabItem.code == tabActiveCode"
            *ngFor="let tabItem of tabItems"
            [title]="tabItem.name"
            (click)="navTabClickHandler(tabItem.code)"
        >
            <i [ngClass]="tabItem.icon"></i>
        </li>
    </ul>
</div>
<!--导航-->
<farris-list-nav class="layout-nav--collapse" (navStateChange)="navStateChangeHandler($event)" [listNavWidth]="320">
    <ng-template listNavHeader>
        <!--下载、重置和刷新按钮-->
        <app-settings-header
            [current]="tabActiveCode"
            (clearCSSEvent)="clearCSSHandler()"
            (buildThemeEvent)="buildThemeHandler()"
        ></app-settings-header>
        <app-search-header *ngIf="tabActiveCode != 'extend'"></app-search-header>
    </ng-template>
    <ng-template listNavContent>
        <app-rapid-settings *ngIf="tabActiveCode == 'rapid'" (clearCSSEvent)="clearCSSHandler()"></app-rapid-settings>
        <!--手动编辑-->
        <div
            class="layout-nav--editor-container"
            *ngIf="tabActiveCode == 'extend'"
            [ngClass]="{ 'f-state-expand': monacoInited && tabActiveCode == 'extend' }"
        >
            <angular-monaco-editor
                class="custom-monaco-editor"
                *ngIf="tabActiveCode == 'extend'"
                [options]="monacoOptions"
                [(ngModel)]="themeExtend"
                (onInit)="onMonacoInitHandler($event)"
            >
            </angular-monaco-editor>
        </div>
    </ng-template>
</farris-list-nav>

<app-loading></app-loading>
